﻿@model AugustaDevelopersGuild.Models.Feedback
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<style type="text/css">
    body a#user-feedback-tab, body a#user-feedback-tab:link
    {
        background-position: 2px 50%;
        background-repeat: no-repeat;
        display: block;
        height: 98px;
        margin: -45px 0 0;
        padding: 0;
        position: fixed;
        text-indent: -9000px;
        top: 45%;
        width: 25px;
        z-index: 100001;
    }
    
    a#user-feedback-tab
    {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #A2CC3B;
        background-image: url("http://cdn.uservoice.com/images/widgets/en/feedback_tab_white.png");
        border-color: #A2CC3B -moz-use-text-color #A2CC3B #A2CC3B;
        border-style: outset none outset outset;
        border-width: 1px medium 1px 1px;
        right: 0;
    }
    
    #user-feedback-waiting
    {
        display: none;
    }
</style>
<div id="user-feedback">
    <div id="user-feedback-message">
    </div>
    <a id="user-feedback-tab"></a>
    <div id="user-feedback-dialog" title="Feedback">
        <div id="user-feedback-form">
            @using (Ajax.BeginForm("SendFeedback", "Home", new AjaxOptions { UpdateTargetId = "user-feedback-message", OnBegin = "showWaiting", OnComplete = "hideWaiting", OnSuccess = "closeDialog", HttpMethod = "Post" }))
            {
                <fieldset>
                    <legend>We want your feedback!</legend>
                    <p>
                        Your feedback is an important part of how we improve this site!</p>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Email)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.Email)
                        @Html.ValidationMessageFor(model => model.Email)
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.Message)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.Message)
                        @Html.ValidationMessageFor(model => model.Message)
                    </div>
                    <input type="button" value="Cancel" onclick="closeDialog(); return false;" />
                    <input type="submit" value="Submit Feedback" />
                </fieldset>
            }
        </div>
        <div id="user-feedback-waiting">
            Sending feedback...</div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#dialog:ui-dialog").dialog("destroy");

        $('#user-feedback-dialog').dialog({
            autoOpen: false,
            modal: true,
            resizable: false,
            width: 600
        });
        $('#user-feedback-tab').click(function () {
            $('#user-feedback-dialog').dialog('open');
            return false;
        });
    });

    function showWaiting() {
        $('#user-feedback-form').hide();
        $('#user-feedback-waiting').show();
    }

    function hideWaiting() {
        $('#user-feedback-waiting').hide();
        $('#user-feedback-form').show();
    }

    function closeDialog() {
        $('#user-feedback-dialog').dialog('close');
    }
</script>
